// 下拉菜单
function Tab(){
    this.cate=document.querySelector(".cate");
    this.ali=document.querySelectorAll(".cateList li");
    this.sub = document.querySelector(".subList")
    this.adiv=document.querySelectorAll(".subList>.bd");
    this.h3_red=document.querySelectorAll(".cateList h3")
    this.index=0;
    this.addEvent()
}
Tab.prototype.addEvent=function(){
    const that = this;
    for(let i=0;i<this.ali.length;i++){
        this.ali[i].xuhao = i;
        this.ali[i].onmouseenter = function(){
            that.hide()
            that.getIndex(this)
            that.show()
        }
    }
    this.cate.onmouseenter=function(){
        that.sub.style.display="block"
    }
    this.cate.onmouseleave=function(){
        that.sub.onmouseenter=function(){
            that.show()
        }
        that.sub.onmouseleave=function(){
            that.hide()
        }
        that.hide()
    }
}
Tab.prototype.hide=function(){
    this.sub.style.display="none"
    this.ali[this.index].style.background="#fafafa"
    this.adiv[this.index].style.display="none"
    this.adiv[this.index].style.opacity = "0";
}
Tab.prototype.show = function(){
    this.sub.style.display="block"
    this.ali[this.index].style.background = "#f2f2f2";
    this.adiv[this.index].style.display = "block";
    this.adiv[this.index].style.opacity = "1";
}
Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
}
new Tab();

//轮播图
function Banner(index){
    this.banner=document.querySelector(".banner")
    this.imgBox=document.querySelector(".imgBox")
    this.left=document.getElementById("left")
    this.right=document.getElementById("right")
    this.time=0
    this.imgs=this.imgBox.children;
    this.index=index;
    this.imgBox.style.width=(this.imgs.length)*(this.imgs[0].offsetWidth)+"px";
    this.imgBox.style.left=this.index*-this.imgs[0].offsetWidth+"px";
    this.addEvent()
}
Banner.prototype={
    constructor:Banner,
    addEvent:function(){
        const that=this;
        this.right.onclick=function(){
            that.changeIndexRight()
        }
        this.left.onclick=function(){
            that.changeIndexLeft()
        }
    },
    
    changeIndexLeft:function(){
        if(this.index===0){
            this.index=this.imgs.length-1;
            this.imgBox.style.left=-(this.imgs.length-1)*this.imgs[0].offsetWidth+"px"
        }
        this.index--
        this.changeLe()
    },
    changeIndexRight:function(){
        if(this.index===this.imgs.length-1){
            this.index=1;
            this.imgBox.style.left=0;
        }else{
            this.index++
        }
        this.changeRi()
    },
    changeRi:function(){
        move(this.imgBox,{
            left:-this.index*this.imgs[0].offsetWidth})
    },
    changeLe:function(){
        move(this.imgBox,{
            left:-this.index*this.imgs[this.imgs.length-1].offsetWidth})
    },
}
function move(ele, data, callback){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        let flag = true;
        for(let i in data){
            let now = parseInt(getStyle(ele, i));
            let speed = (data[i] - now) / 7;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            ele.style[i] = now + speed + "px";
            if(data[i] !== now) flag = false;
        }
        if(flag){
            clearInterval(ele.t)
            callback && callback();
        }
    }, 30);
}
function getStyle(ele, attr){
    return getComputedStyle ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
}
var a=new Banner(0)

// 滚动列表
const con=document.querySelector(".scroll")
const box=document.querySelector(".bd_scroll")
setInterval((function(){
    if( parseInt(con.style.top)<-1000){
        con.style.top=0+"px"
        clearInterval()
    }else{
        con.style.top=(parseInt(con.style.top)-22)+"px"
    }
}),3000)
const a1=document.querySelector(".a1")
const a2=document.querySelector(".a2")
const body=document.querySelector(".body")
const body2=document.querySelector(".body2")

a2.onmouseenter=function(){
    body.style.display="none"
    body2.style.display="block"
}
a1.onmouseenter=function(){
    body2.style.display="none"
    body.style.display="block"
}
setInterval(() => {
        $(".right_btn").trigger("click");
    }, 3500);
$(".fl_btn").find("li").click(function(){
    $("html").stop().animate({
        scrollTop:$(".floor").eq($(this).index()).offset().top
    })
    $(this).addClass("current").siblings().removeClass("current") 
})
